import React from 'react';
import PropTypes from 'prop-types';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Layout } from 'antd';
import DocumentTitle from 'react-document-title';
import { connect, routerRedux, router } from 'dva';

import styles from '../css/frame.less';
// import { menuUrl } from '../common/router'
import menuUrl from '../common/umiMenuUrl';
import _ from 'lodash';
import SystemNoticeTip from './MainLayout/GlobalHeader/myComps/SystemNoticeTip';
import NavbarC from './workStation/Navbar/NavbarC';
import workStationConfig from './workStation/dataConfig';
import MainLayout from './MainLayout/MainLayout';
import { workStationRoutes, workStationKeys } from '../common/workStationRouter';
import WorkStationContent from './workStation/workStationContent';
import { clearCookie } from '../utils/commonFunc';
const { Route, Switch } = router;
// 获取重定向地址
const getBashRedirect = () => {
  // According to the url parameter to redirect
  // 这里是重定向的,重定向到 url 的 redirect 参数所示地址
  const urlParams = new URL(window.location.href);
  const redirect = urlParams.searchParams.get('redirect');
  // Remove the parameters in the url
  if (redirect) {
    urlParams.searchParams.delete('redirect');
    window.history.replaceState(null, 'redirect', urlParams.href);
  } else {
    return undefined; // 默认进入首页
  }
  return redirect;
};

// 无需校验工作台相关路由
@Form.create()
class BasicLayout extends React.PureComponent {
  // React Context 是嵌套层次较深的兄弟组件之间通信的一种便捷方式，在某些使用场景作用是很强大的，所以需要谨慎使用。
  // static childContextTypes = {
  //   location: PropTypes.object,
  //   breadcrumbNameMap: PropTypes.object,
  // }

  state = {
    redirect: getBashRedirect(), // 获取重定向地址
    pageStatus: '0', // 0 正在加载,loading页面;1 无工作台，保持原页面；2 有工作台，定位在主页面；3 有工作台,定位在barra 4 有工作台，定位在noStandard
    currentStations: [], // 当前工作台数组
    loginFirst: true, // 是否是第一次登录
    userData: undefined, // 用户的登录信息
  };

  // // 将location和breadcrumbNameMap注入到每个深层次子组件中 子组件通过 this.content.location获取
  // // PageHeaderLayout.js 有引入这两个组件pageHeader location和breadcrumbNameMap
  // // PageHeaderLayout.js在多个文件引入，暂时不好处理
  // getChildContext() {
  //   const { location, routerData } = this.props;
  //   return {
  //     location,
  //     breadcrumbNameMap: routerData,
  //   };
  // }

  // 判断路由  确定注入哪个路由
  judgeUrl = (data, pathname) => {
    // 获取重定向地址
    const redirect = ['/maatBlank', '/'].includes(this.state.redirect) ? undefined : this.state.redirect; // 重定向为空白地址 则忽略
    // data.workbenchConfiguration='1,2,3';//测试代码 需要删除

    if (data?.workbenchConfiguration) {
      const { stationModels, workbenchConfiguration } = data;
      const currentStations = [];
      workStationConfig.map((item) => {
        if (item.judgeByTenant && workbenchConfiguration.indexOf(item.tenantConfigValue) > -1) {
          // 需要判断租户配置有工作台 且租户配置选择了该工作台
          if (item.judgeByStation) {
            if (stationModels?.length) {
              // 需要判断岗位信息 对应的工作台
              stationModels.map((station) => {
                if (station.postCode == item.stationConfig.stationCode) {
                  currentStations.push(item.stationConfig);
                }
              });
            }
          } else {
            // 只需要判断租户配置有工作台 就展示
            currentStations.push(item.stationConfig);
          }
        }
      });
      // currentStations = currentStations.concat({ path: '/penetrate', selected: false, title: 'penetrate', value: '5' });
      if (currentStations.length) {
        // 有工作台
        this.setState(
          {
            currentStations: [{ title: 'mainMenu', value: '2', selected: false, path: '/mainCalendar' }, ...currentStations],
          },
          () => {
            if (workStationKeys.includes(redirect) || workStationKeys.includes(pathname)) {
              console.log('地址栏敲入的地址 或者地址栏本身就是工作台地址 定位在工作台');
              // 地址栏敲入的地址 定位在工作台
              let status;
              currentStations.map((item, index) => {
                if (workStationKeys.includes(redirect) || workStationKeys.includes(pathname)) {
                  const path = redirect || pathname;
                  // 用户直接在浏览器输入/Barra或其他工作台地址
                  item.selected = item.path == path;
                  if (item.path == path) {
                    status = item.value;
                  }
                }
              });
              this.setState(
                {
                  pageStatus: status,
                  currentStations: [...this.state.currentStations],
                },
                () => {
                  this.setHeaderHeight();
                },
              );
              this.jumpToRoute(redirect); // 地址跳转
            } else {
              // 直接定位到主功能
              console.log('直接定位到主功能');
              // 高亮主功能
              this.state.currentStations.map((item, index) => {
                item.selected = index === 0;
              });
              this.setState(
                {
                  pageStatus: '2',
                  currentStations: [...this.state.currentStations],
                },
                () => {
                  this.setHeaderHeight();
                },
              );
              // 地址栏敲入的地址 优先于默认主页面地址
              this.jumpToRoute(redirect || (pathname == '/' ? '/mainCalendar' : pathname)); // 地址跳转
            }
          },
        );
      } else {
        console.log('有岗位但无工作台 进入主页面==>无工作台权限');
        this.setState(
          {
            pageStatus: '1',
          },
          () => {
            this.setHeaderHeight();
          },
        );
        // 地址栏敲入的地址 优先于默认主页面地址
        this.jumpToRoute(redirect || (this.state.loginFirst ? '/mainCalendar' : pathname)); // 地址跳转
      }
    } else {
      if (data == '登录失败') {
        // 401等错误被迫登出，路由已经是重定向地址 不再判断进入主页面 否则死循环
        return;
      }
      console.log('用户从登录页面直接登录系统（包含测试环境和互联网环境）==>无工作台权限');
      this.setState(
        {
          pageStatus: '1',
        },
        () => {
          this.setHeaderHeight();
        },
      );
      this.jumpToRoute(redirect || (this.state.loginFirst ? '/mainCalendar' : pathname));
    }
  };

  // 跳转路由
  jumpToRoute = (url) => {
    if (this.permissionOrBlank()) return; // 如果是无权限或者空白页 直接进入对应页面 不再进入用户输入的地址 否则会出现死循环
    this.props.dispatch(routerRedux.push(url == '/' ? '/mainCalendar' : url));
  };

  // 设置页面头部所占高度
  setHeaderHeight = () => {
    this.props.dispatch({
      type: 'globalM/save',
      payload: {
        headerHeight: this.state.pageStatus > 1 ? 59 : 0,
      },
    });
  };

  // 提取URL
  getUrl = (dataSource, url, newMenum) =>
    dataSource?.map((item) => {
      const { path, menuModels = [] } = item;
      const path1 = `${url}/${path}`;
      if (Array.isArray(menuModels) && menuModels.length) {
        this.getUrl(menuModels, path1, newMenum);
      } else {
        newMenum.push(path1);
      }
    });

  // 浏览器展示名称
  // getPageTitle() {
  //   const { routerData, location } = this.props;
  //   const { pathname } = location;
  //   let title = '投资组合管理系统';
  //   if (routerData[pathname] && routerData[pathname].name) {
  //     title = `${routerData[pathname].name} - 投资组合管理系统`;
  //   }
  //   return title;
  // }

  // 判断用户是否有该页面权限
  urlPermission = (url) => {
    if (workStationKeys.includes(url) && this.state.currentStations?.length) {
      // 工作台页面的权限判断
      const data = this.state.currentStations.find((item) => item.path == url);
      return data;
    } else {
      if (workStationKeys.includes(url) && this.state.pageStatus != '0') {
        // 加载页面的时候 不去判断 ；用户已经登录过，但没有“权益类投资经理”岗位，跳转至无权限页面
        return false;
      }
      const newMenum = _.cloneDeep(this.menuUrl1);
      const menum = this.props.user.userMenuData;
      this.getUrl(menum, '', newMenum);
      return newMenum?.some((item) => item == url);
    }
  };

  // 判断用户输入的URL是否存在
  noUrl = (url) => {
    return menuUrl?.some((item) => item.url == url);
  };

  // 判断有无权限或者空白页面
  permissionOrBlank = () => {
    const { location } = this.props;
    const permission = this.urlPermission(location.pathname);
    // 工作台相关不做无页面处理
    const blank = this.noUrl(location.pathname);
    let flag = false;
    if (!blank) {
      // 跳转无页面路由
      flag = true;
      localStorage.setItem('maatBlank', window.location.href);
      this.props.dispatch(routerRedux.replace('/maatBlank'));
    } else if (!permission && this.props.user.userMenuData?.length) {
      flag = true;
      // 跳转无权限路由
      localStorage.setItem('maatNoPermission', window.location.href);
      this.props.dispatch(routerRedux.replace('/maatNoPermission'));
    }
    return flag;
  };

  UNSAFE_componentWillMount = () => {
    // 获取进入时间
    this.timeStamp = new Date().getTime();
    console.log('进入basicLayout框架', this.timeStamp, this.props.location.pathname);
    // 用户直接在浏览器输入不存在的路由 用户未登录，直接跳转至登录页面 再次登录到首次登录的地址
    // 用户未登录地址栏输入/, 视为无重定向,重新调用
    const redirect = ['/maatBlank', '/'].includes(this.state.redirect) ? undefined : this.state.redirect; // 重定向为空白地址 则忽略
    console.log('重定向地址', redirect);
    if (this.props.location.pathname != '/' && !workStationKeys.includes(this.props.location.pathname)) {
      // 非直接登录，且地址不在工作台
      this.setState({
        loginFirst: false,
      });
    } else if (redirect && !workStationKeys.includes(redirect)) {
      // 重定向地址且地址不在工作台 则为主功能地址
      this.setState({
        loginFirst: false,
      });
    }

    // 保存需要跳转的路由(有无权限 无效页面判断需要)
    const newmenuUrl = [];
    menuUrl.map((item) => {
      if (item.permission == true) {
        return newmenuUrl.push(item.url);
      }
    });
    this.menuUrl1 = _.cloneDeep([...new Set(newmenuUrl)]);
  };

  componentDidMount() {
    const {
      dispatch,
      location: { search },
    } = this.props;
    console.log('2-basicLayout', localStorage.getItem('antd-pro-userId'));
    // 获取登出code 用于判断退出之后跳转的登录地址
    dispatch({
      type: 'login/getSystemCode',
      payload: {},
    });
    // 获取登录用户信息
    dispatch({
      type: 'userM/fetchCurrent',
      payload: {
        // userId: localStorage.getItem('antd-pro-userId'),
      },
    }).then((data) => {
      console.log(data, '请求完成');
      if (data == '登录失败') return; // 用户信息登录不成功，其余接口不再请求 无数据关系依赖 几个接口
      // 获取用户菜单
      const getMenus = new Promise((resolve, reject) => {
        dispatch({
          type: 'userM/getMenu',
          payload: {
            userId: localStorage.getItem('antd-pro-userId'),
          },
        }).then((res) => {
          if (res) {
            resolve();
          } else {
            reject();
          }
        });
      });
      // 查询全量字典
      const getDicts = new Promise((resolve, reject) => {
        dispatch({
          type: 'globalM/fetchDataDictionary',
        }).then((res) => {
          if (res) {
            resolve();
          } else {
            reject();
          }
        });
      });
      // 全部查询完成后 再确定跳转的页面
      Promise.all([getMenus, getDicts]).then(
        () => {
          console.log('三个接口调用完时间：', new Date().getTime(), new Date().getTime() - this.timeStamp);
          this.setState({ userData: data });
          this.judgeUrl(data, this.props.location.pathname);
        },
        () => {
          console.log('登录的接口有失败的');
        },
      );
    });
  }

  UNSAFE_componentWillReceiveProps(nextPorps) {
    if (nextPorps.location.pathname != this.props.location.pathname) {
      // 因地址栏直接输入/  已经登录状态下 不会进入的didmount
      if (nextPorps.location.pathname === '/') {
        console.log('输入/ 根地址 重新进入到登录初始路由判定 数据恢复到初始化');
        this.setState({ loginFirst: true });
        this.judgeUrl(this.state.userData, nextPorps.location.pathname);
      } else {
        // 判断是从主功能跳转到其他工作台过来的，保存主功能的地址；如果地址栏是/ 则不保存主功能地址，否则清除
        if (!workStationKeys.includes(this.props.location.pathname) && workStationKeys.includes(nextPorps.location.pathname)) {
          this.props.dispatch({
            type: 'userM/saveParams',
            payload: {
              mainActivePath: this.props.location.pathname == '/' ? undefined : this.props.location.pathname,
            },
          });
        }
      }
    }
  }

  componentWillUnmount() {
    clearCookie(); // 清空 避免关闭浏览器时 cookie还在 导致登录报错
    this.props.dispatch({
      type: 'userM/saveParams',
      payload: {
        mainActivePath: undefined,
      },
    });
    // 顶部高度恢复默认值
    this.props.dispatch({
      type: 'globalM/save',
      payload: {
        headerHeight: 0,
      },
    });
  }

  render() {
    const { location, match } = this.props;
    this.permissionOrBlank(); // 判断有无权限或者空白页面
    const { currentStations, pageStatus } = this.state;
    let stations = [];

    if (pageStatus > 1) {
      // 有工作台
      const arr = []; // 临时存放 用户有权限的工作台相关数据
      workStationRoutes.map((item) => {
        currentStations.map((current) => {
          if (current.path == item.path) {
            arr.push(item);
          }
        });
      });
      stations = [].concat(arr);
      stations.unshift({
        path: currentStations[0]?.path,
        component: MainLayout,
        props: this.props,
      });
    }

    const layout = (
      <Layout style={{ height: pageStatus > 2 ? '100vh' : undefined }}>
        {/* 有工作台的导航栏 */}
        {pageStatus > 1 ? (
          <NavbarC
            changeStatus={(e) => {
              this.setState({ pageStatus: e });
            }}
            menus={this.state.currentStations}
            location={location}
          />
        ) : null}

        {/* 无工作台 */}
        {pageStatus == 1 && (
          <Switch>
            <Route render={() => <MainLayout {...this.props} pageStatus={pageStatus} />} />
          </Switch>
        )}
        {/* 有工作台 */}
        {pageStatus > 1 ? (
          <WorkStationContent
            myTabs={stations?.map((item) => {
              return {
                key: item.path,
                name: item.path,
                dispatch: this.props.dispatch,
                component: item.component,
                props: item.props || {},
              };
            })}
            activePath={location.pathname}
            pageStatus={pageStatus}
            location={location}
            match={match}
          />
        ) : null}
        {/* 系统公告发版本提醒  loading 结束再展示 */}
        {pageStatus > 0 ? <SystemNoticeTip /> : null}
      </Layout>
    );
    // 初始加载页面
    const loadingContent = (
      <div className={styles.firstLoading} style={{ width: '100%', height: 'calc(100vh)' }}>
        {' '}
      </div>
    );

    return (
      // <DocumentTitle title={this.getPageTitle()}>
      <div>{pageStatus !== '0' ? layout : loadingContent}</div>
      // </DocumentTitle>
    );
  }
}

export default connect(({ globalM, userM: user, login }) => ({
  globalM,
  user,
  login,
}))(BasicLayout);
